<template>
    <div class="btn-brd5">
        <module-bord @closeModule="$emit('closeModule')" :moduleBordProp="comfirmMsg">
            <div class="sure-start-prize">
                <h6 class="comfirm-title" v-if="comfirmMsg.title">{{comfirmMsg.title}}</h6>
                <div class="content text-center" v-if="comfirmMsg.content">{{comfirmMsg.content}}</div>
                <div class="displayFlex justifyCtArd padding20px btns-wrap">
                    <span class="confirm-btn cancle-btn" @click="$emit('cancleFn')">
                        <img v-if="comfirmMsg.cancleImg" class="cancle-start-prize"
                             v-lazy="staticImageUrl('images/'+comfirmMsg.cancleImg)" alt=""/>
                        <span class="cancle-start-btn">{{comfirmMsg.cancleBtn}}</span>
                    </span>
                    <span class="confirm-btn sure-btn" @click="$emit('sureFn')">
                        <img v-if="comfirmMsg.cancleImg" class="sure-start-prize"
                             v-lazy="staticImageUrl('images/'+comfirmMsg.cancleImg)" alt=""/>
                        <span class="sure-start-btn">{{comfirmMsg.suerBtn}}</span>
                    </span>
                </div>
            </div>
        </module-bord>
    </div>
</template>

<script>
    export default {
        name: "bord",
        props: {
            comfirmProp: Object,
        },
        data() {
            return {
                comfirmMsg: {
                    title: '确认开奖？',
                    suerBtn: '确认',
                    sureImg: '',
                    cancleBtn: '取消',
                    content: '',
                    cancleImg: '',
                    isNeedCloseBtn: false,
                }
            }
        },
        mounted() {
            this.comfirmMsg = Object.assign({}, this.comfirmMsg, this.comfirmProp);
        },
        methods: {},
        components: {
            'module-bord': () => import('../ModuleBord'),

        },
        watch: {
            comfirmProp(val) {
                this.comfirmMsg = Object.assign({}, this.comfirmMsg, val);
            }
        }
    }
</script>

<style scoped lang="scss">
    .sure-start-prize {
        background-color: #fff;
        border-radius: .1rem;
    }
    .btn-brd5 /deep/{
        .module-bord-content {
            width: 3rem;
            padding: .3rem 0 0 0;
            overflow: hidden;
        }
    }

    .btns-wrap {
        border-top: 1px solid #E0E0E0;
        padding: 0;

        .cancle-btn {
            color: #666666;
        }

        .sure-btn {
            color: #5D89E8;
        }
    }

    .btns-wrap .confirm-btn:last-child {
        border-right: 0;
    }

    .comfirm-title {
        text-align: center;
        font-size: .2rem;
        color: #333;
        padding-bottom: .33rem;
    }

    .confirm-btn {
        color: #fff;
        font-size: .14rem;
        text-align: center;
        border-right: 1px solid #E0E0E0;
        background-color: #fff;
        width: 50%;
        height: .45rem;
        border-radius: unset;
        line-height: .45rem;
    }
</style>